<template>
  <div class="main-content">
    <div class="row page-head clearfix">
      <div class="page-head__left">
        <h3 class="section-title">
          <p class="item cur video-title">
            我的视频   
            <!-- 当总数大于10时显示更多按钮 -->
            <span style="float:right" v-if="total>10">
              <i @click="moreVideo" class="el-icon-arrow-right"></i>
            </span>
          </p>
        </h3>
      </div>
    </div>
    <div id="submit-video" class="section video">
      <div id="video-list-style" class="cube">
        <div id="submit-video-list" class="content">
          <ul class="clearfix cube-list" style>
            <li
              v-for="item in videoList"
              :key="item.videoId"
              data-aid="BV1ts4y1z7ck"
              class="small-item fakeDanmu-item"
            >
              <a :href="videoUrl+item.videoId" target="_blank" class="cover">
                <div class="b-img">
                  <picture class="b-img__inner">
                 
                    <img
                      :src="prefixUrl+item.videoCover"
                      :alt="item.videoTitle"
                      loading="lazy"
                      onload="bmgOnLoad(this)"
                      onerror="bmgOnError(this)"
                      data-onload="bmgCmptOnload"
                    />
                  </picture>
                </div>
                <span class="length">{{item.videoLongth}}</span>
                <span class="i-watchlater"></span>
                <!---->
              </a>
              <a
                :href="videoUrl+item.videoId"
                target="_blank"
                :title="item.videoTitle"
                class="title"
              >{{item.videoTitle}}</a>
              <div class="meta">
                <span class="play">
                  <svg
                    class="svg-icon-next play"
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    viewBox="0 0 16 16"
                    width="16"
                    height="16"
                    style="width: 16px; height: 16px;"
                  >
                    <path
                      d="M8 3.3320333333333334C6.321186666666667 3.3320333333333334 4.855333333333333 3.4174399999999996 3.820593333333333 3.5013466666666666C3.1014733333333333 3.5596599999999996 2.5440733333333334 4.109013333333333 2.48 4.821693333333333C2.4040466666666664 5.666533333333334 2.333333333333333 6.780666666666666 2.333333333333333 7.998666666666666C2.333333333333333 9.216733333333334 2.4040466666666664 10.330866666666665 2.48 11.175699999999999C2.5440733333333334 11.888366666666666 3.1014733333333333 12.437733333333334 3.820593333333333 12.496066666666666C4.855333333333333 12.579933333333333 6.321186666666667 12.665333333333333 8 12.665333333333333C9.678999999999998 12.665333333333333 11.144933333333334 12.579933333333333 12.179733333333333 12.496033333333333C12.898733333333332 12.4377 13.456 11.888533333333331 13.520066666666667 11.176033333333333C13.595999999999998 10.331533333333333 13.666666666666666 9.217633333333332 13.666666666666666 7.998666666666666C13.666666666666666 6.779766666666667 13.595999999999998 5.665846666666667 13.520066666666667 4.821366666666666C13.456 4.108866666666666 12.898733333333332 3.55968 12.179733333333333 3.5013666666666663C11.144933333333334 3.417453333333333 9.678999999999998 3.3320333333333334 8 3.3320333333333334zM3.7397666666666667 2.50462C4.794879999999999 2.41906 6.288386666666666 2.3320333333333334 8 2.3320333333333334C9.7118 2.3320333333333334 11.2054 2.4190733333333334 12.260533333333331 2.5046399999999998C13.458733333333331 2.6018133333333333 14.407866666666665 3.5285199999999994 14.516066666666667 4.73182C14.593933333333332 5.597933333333334 14.666666666666666 6.7427 14.666666666666666 7.998666666666666C14.666666666666666 9.2547 14.593933333333332 10.399466666666665 14.516066666666667 11.2656C14.407866666666665 12.468866666666665 13.458733333333331 13.395566666666667 12.260533333333331 13.492766666666665C11.2054 13.578333333333333 9.7118 13.665333333333333 8 13.665333333333333C6.288386666666666 13.665333333333333 4.794879999999999 13.578333333333333 3.7397666666666667 13.492799999999999C2.541373333333333 13.395599999999998 1.5922066666666668 12.468633333333333 1.4840200000000001 11.265266666666665C1.4061199999999998 10.3988 1.3333333333333333 9.253866666666667 1.3333333333333333 7.998666666666666C1.3333333333333333 6.743533333333333 1.4061199999999998 5.598579999999999 1.4840200000000001 4.732153333333333C1.5922066666666668 3.5287466666666667 2.541373333333333 2.601793333333333 3.7397666666666667 2.50462z"
                      fill="currentColor"
                    />
                    <path
                      d="M9.8092 7.3125C10.338433333333333 7.618066666666666 10.338433333333333 8.382 9.809166666666666 8.687533333333333L7.690799999999999 9.910599999999999C7.161566666666666 10.216133333333332 6.5 9.8342 6.500006666666666 9.223066666666666L6.500006666666666 6.776999999999999C6.500006666666666 6.165873333333334 7.161566666666666 5.783913333333333 7.690799999999999 6.089479999999999L9.8092 7.3125z"
                      fill="currentColor"
                    />
                  </svg>
                  <span>{{item.videoPlayTimes}}</span>
                </span>
                <span  class="time">{{formatDate(item.createTime)}}</span>
              </div>
            </li>
          </ul>


         
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "tougaoconcent",
  data() {
    return {
      currentPage: 1,
      pageSize: 15,
      videoList: "",
      total: "",
      prefixUrl: "http://",
      videoUrl: "/videoplay/"
    };
  },
  created() {
    this.getVideoList(this.videoList);
  },
  methods: {
    //只获取该数据的年月日
    formatDate(dateStr) {
      const date = new Date(dateStr);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    getVideoList() {
      
      this.axios({
        method: "get",
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          partId: '',
          videoTitle: "",
          location: this.$route.params.userId
        },
        url: "http://localhost:8094/video/getPageVideo"
      })
        .then(res => {
          this.videoList = res.data.records;
          this.total = res.data.total;
          console.log("this.videoList", this.videoList);
        })
        .catch(e => {
          this.$message.error(e.response.data.message);
        });
    },
    moreVideo(){
      // this.$router.push();
    }
  }
};
</script>
<style   scoped>

</style>